<template>
	<view class="list-date">
		<uni-list>
			<radio-group @change="radioGroupChange">
				<uni-list-item v-for="(v, k) in list" :key="k">
					<view slot="header" class="hd">
						<view class="item-title">{{ v.name }}</view>
					</view>

					<radio slot="footer" :value="v.value" :checked="v.value == radio" />
				</uni-list-item>
			</radio-group>
		</uni-list>

		<u-calendar v-model="calendar.status" mode="range" :safe-area-inset-bottom="true" @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
export default {
	name: 'listUser',
	data() {
		return {
			// 搜索词
			keyword: '',
			// 选中的值
			radio: '',
			selectValue: '',
			// 日历组件信息
			calendar: {
				status: false,
			},
			// 日期筛选条件
			list: [
				{ name: '今天', value: 'today' },
				{ name: '昨天', value: 'yesterday' },
				{ name: '本周', value: 'week' },
				{ name: '上周', value: 'lastWeek' },
				{ name: '本月', value: 'month' },
				{ name: '上月', value: 'lastMonth' },
				{ name: '本季度', value: 'quarter' },
				{ name: '上季度', value: 'lastQuarter' },
				{ name: '本年', value: 'year' },
				{ name: '去年', value: 'lastYear' },
				{ name: '自定义', value: 'diy' },
			],
		};
	},
	mounted() {},
	methods: {
		// radio改变设置值
		radioGroupChange(data) {
			let val = data.detail.value;
			if (val === 'diy') {
				this.calendar.status = true;
			}
			let text = this.list.find((v) => v.value === val).name;
			this.$emit('selected', text, [val]);
		},
		// 日历改变事件
		calendarChange(data) {
			this.$emit('selected', data.startDate + '~' + data.endDate, [data.startDate, data.endDate]);
		},
	},
};
</script>

<style lang="scss" scoped>
.list-date {
	.uni-list {
		margin: 0 15px !important;

		/deep/ {
			margin-bottom: 50px;
			.uni-list-item {
				font-size: 14px;
			}
			.uni-list-item__container {
				padding: 12px 0;
				.hd {
					flex: 1;
				}
			}
			.uni-list-item__content {
				display: none;
			}
			.u-col {
				padding: 0 !important;
				color: #666;
			}
		}
	}
}
</style>